<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<uni-section title="报表管理" type="line" v-if="bbglType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in bbglList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
		<uni-section title="农业管理" type="line" v-if="nyglType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in nyglList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
		<uni-section title="物料信息" type="line" v-if="wlxlType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in wlxlList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
		<uni-section title="仓储管理" type="line" v-if="ccglType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in ccglList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
		<uni-section title="生产管理" type="line" v-if="scglType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in scglList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
		<uni-section title="西部印象" type="line" v-if="xbyxType">
			<view class="grid-body">
				<u-grid :column="4" :showBorder="false">
					<u-grid-item v-for="(item, index) in xbyxList" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="grid-item-box">
								<u-icon :name="item.icon" size="40"></u-icon>
								<text class="text">{{item.menuName}}</text>
							</view>
						</navigator>
					</u-grid-item>
				</u-grid>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {
		getUserAppMenu
	} from "@/api/system/user"
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/a7bc3138-a48a-4bf8-ba3d-7fb6e72e1f90.jpg'
					},
					{
						image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/443046ef-8794-4716-99d1-3c960c103055.jpg'
					},
					{
						image: 'https://henanhanyong.oss-cn-beijing.aliyuncs.com/2025/01/11/62408c1f-4f5d-470b-a2c2-5265e700b0e6.jpg'
					}
				],
				menuList: [],
				xbyxList: [],
				ccglList: [],
				scglList: [],
				wlxlList: [],
				bbglList: [],
				nyglList: [],

				xbyxType: false,
				ccglType: false,
				scglType: false,
				wlxlType: false,
				bbglType: false,
				nyglType: false,
			}
		},
		onLoad() {
			this.getMenu()
		},
		methods: {
			getMenu() {
				getUserAppMenu().then(response => {
					this.menuList = response.data

					for (let i = 0; i < this.menuList.length; i++) {
						if (this.menuList[i].type === "1") {
							this.xbyxType = true
							this.xbyxList.push(this.menuList[i])
						}

						if (this.menuList[i].type === "2") {
							this.ccglType = true
							this.ccglList.push(this.menuList[i])
						}

						if (this.menuList[i].type === "5") {
							this.scglType = true
							this.scglList.push(this.menuList[i])
						}

						if (this.menuList[i].type === "6") {
							this.wlxlType = true
							this.wlxlList.push(this.menuList[i])
						}

						if (this.menuList[i].type === "7") {
							this.bbglType = true
							this.bbglList.push(this.menuList[i])
						}
						if (this.menuList[i].type === "8") {
							this.nyglType = true
							this.nyglList.push(this.menuList[i])
						}

					}
				})
			},

			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
			},

		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>